<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的demo案例</title>
    <script type="text/javascript" src="vue-v2.6.14/vue.min.js"></script>

</head>
<body>
<!--html语句块-->
<div id="app">
    <span> {{ message }} </span>
    <button v-on:click="doclick">点击改变值</button>
    <input type="text" v-model="message">
    <hr>
    <button @click="doquery">查询demo</button>
    <hr>
    <ul id="showdata">
        <li v-for="(item, index) in items">
            {{ index + 1 }} - {{ item.username }}- {{ item.useraddress }}
        </li>
    </ul>
</div>

<!--使用axios第三方的组件进行一步查询操作，完成ajax请求处理，当然可以使用jquery实现，此处使用 axios 组件-->
<script type="text/javascript" src="axios-0.21.1/axios.min.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        // 当前vue对象实例绑定html块，达到一个数据的双向绑定，
        // 另外vue对象只对进行绑定的 html 块完成数据绑定处理，所以注意 绑定html块的范围
        el: "#app",  // vue管辖的范围
        data: {// 在vue管辖范围之内的双向动态绑定的数据源
            message: "hello vue",
            items: [],// v-for绑定的结果集，一般该结果集在 ajax 异步回调的时候进行更新，这样dom就随着vue数据源更新而重新渲染
        },
        methods: { // vue管辖范围之内进行事件响应和绑定处理
            // 定义一个名字为doclick的函数
            doclick: function () {
                this.message += ", nuc!";
            },
            doquery: function () {
                // 保留当前的this对象
                var _self = this; // 表示当前的vue对象，因为在axios的post方法中，this已经发生了改变，不再指向vue对象，
                // 所有需要使用 局部变量 进行绑定 var 作用域是所在function语句块

                // 使用ajax进行查询
                axios.post('UserinfoQuery', {
                    username: 'user',
                    useraddress: '山西'
                })// then 是ajax请求成功之后的处理 等价于 jquery 的 success 回调
                    .then(function (response) { // 使用response.data可以回去ajax发回的数据对象
                        console.log("axios回调：")
                        console.log(response);
                        console.log(response.data);
                        // 更新v-for绑定的数据源，这样vue双向数据绑定会刷新dom
                        _self.items = response.data;

                    }) // catch 是ajax请求失败之后的处理， 等价于 jquery 的error 回调
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    });
</script>

</body>
</html>